import React from 'react';
import './programConfig.scss';
import { HashRouter as Router, Link} from 'react-router-dom';
import cookie from 'react-cookies';
import BreadcrumbNav from '../../../component/breadcrumb/breadcrumb.js';
import { List } from 'antd';
import BarrierGate from '../../../component/progress/progress.js';
import {getProjectInfo,getProjectInfoByProjectId, getUserProjectInfo} from '../../../api/hardwareCenter'
import { createHashHistory } from 'history';
const hashHistory = createHashHistory();
class programConfig extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            activeUlId:'',
            data:[],
        }
    }

    componentDidMount() {
        
        const type = this.props.location.state ? '2' : '1'
        sessionStorage.setItem('activeType', type);
        this.getProjectInfo()
    }
    getProjectInfo = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'state' : 2
        }
        getUserProjectInfo(post_data).then(res => {
            this.setState({
                activeUlId: this.props.location.state ? this.props.location.state.id : res.data[0].id,
                data: res.data
            }, () => {
                this.ulClick(this.state.activeUlId)
            })
        })
    }

    
    ulClick = (id) => {
        this.setState({
            activeUlId:id
        },() => {
            if(this.getUrlSearch('id')&&this.getUrlSearch('type')&&this.getUrlSearch('state')){
               this.setState({
                   activeUlId:''
               })
                // hashHistory.push({ pathname: `/programConfigDetail?id=${id}&type=${type}&state=${state}`,  })
            }else {
                hashHistory.push({ pathname: `/programConfigDetail?id=${id}`,  })
            }
            
        })
    }
    // 获取不同项目详情
    getProjectInfoByProjectId = () => {
        let post_data = {
            'auth_token':cookie.load('station_console_setting_web_login').auth_token,
            'project_id':this.getUrlSearch('id')
        }
        getProjectInfoByProjectId(post_data).then(res => {
            this.setState({
                projectData: res.data
            })
        })
    }
    getUrlSearch = (name) => {
        // 未传参，返回空
        if (!name) return null;
        // 查询参数：先通过search取值，如果取不到就通过hash来取
        var after = window.location.search;
        after = after.substr(1) || window.location.hash.split('?')[1];
        // 地址栏URL没有查询参数，返回空
        if (!after) return null;
        // 如果查询参数中没有"name"，返回空
        if (after.indexOf(name) === -1) return null;
    
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
        // 当地址栏参数存在中文时，需要解码，不然会乱码
        var r = decodeURI(after).match(reg);
        // 如果url中"name"没有值，返回空
        if (!r) return null;
    
        return r[2];
    }

    render() {
        const { data,activeUlId } = this.state;
        return (
            <Router>
                <div className="CloudArrangingmonitor_programConfig" id="ContentMainList">
                    <div className="nav_bar_child_list" id="nav_bar_child_list">
                        <div className="title">项目名称</div>
                        <List
                            id="nav_bar_child_list_nav"
                            itemLayout="horizontal"
                            dataSource={data}
                            renderItem={item => (
                                <List.Item className={activeUlId === item.id ? "active" : ''}>
                                <div className={activeUlId === item.id ? 'ulDot' : 'ulDot2'}></div>
                                <List.Item.Meta
                                className="ulTitle"
                                onClick={this.ulClick.bind(this,item.id)}
                                title={<Link 
                                    to={
                                        {pathname:`/programConfigDetail`,search:`?id=${item.id}`}
                                        }>{item.project_name}</Link>}
                                        description={`${item.lane_in_count}进${item.lane_out_count}出${(() => {
                                            if (item.project_phase === 1) {
                                                return ' - 厂区建设阶段'
                                            } else if (item.project_phase === 2) {
                                                return ' - 道闸施工阶段'
                                            } else if (item.project_phase === 3) {
                                                return ' - 软件调试阶段'
                                            } else if (item.project_phase === 4) {
                                                return ' - 维保期内'
                                            } else {
                                                return ' - 服务到期'
                                            }
                                        })()}`}
                                    // style={{display:'inline-block'}}
                                />
                                
                                    {activeUlId === item.id ? <img alt="" className="jiantou" src={require('../../../assets/img/ulblue.png')} /> : <img alt="" className="jiantou" src={require('../../../assets/img/grey.png')} />}
                            </List.Item>
                            
                            )}
                        />
                        <div className="addNewPro">
                            <button 
                            onClick={()=>{window.location.href="/index/hardwareCenter/programConfig/programConfigDetail/NewProject"}}
                            >
                                {/* <Link 
                                    to={
                                        {pathname:`/addNewPro1`}
                                        }>+ 新建项目
                                </Link>
                                */}
                                新建项目
                            </button>
                        </div>
                        
                    </div>
                    <div className="has_list_conent">     
                        {/* 面包屑组件 */}
                        <BreadcrumbNav />  
                        <div id="content-detail">
                            <BarrierGate />
                        </div>
                    </div>
                </div>
            </Router>
        )
    }
}

export default programConfig;